<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<script type="text/javascript" src="../js/getParameter.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>
	<style>
		#div1{
			border:2px solid #1e9fff;
		}
	</style>
	<body>
	<div id="app">
		<main>
			<section class="profileItem itemBg mbt30">
				<div class="container">
					<div class="picBox">
						<img :src="gym.src" class="pic radius20"/>
					</div>
					<h3 class="commonTitle"><i class="icon"></i>展馆简介</h3>
					<div class="commontext">
						{{gym.introduce}}
					</div>
				</div>
			</section>
			<section class="profileItem whiteBg mbt30">
				<div class="container">
					<h3 class="commonTitle"><i class="icon"></i>项目介绍</h3>
					<div class="commontext">
						{{gym.itemdesc}}
					</div>
				</div>
			</section>
			<section class="profileItem whiteBg">
				<div class="container">
					<h3 class="commonTitle"><i class="icon"></i>注意事项</h3>
					<div class="commontext">
						{{gym.note}}
					</div>
				</div>
			</section>
			<section class="profileItem whiteBg">
				<div class="container">
					<h3 class="commonTitle"><i class="icon"></i>用户评论</h3>
					<div class="commontext" v-for="(content,i) in contents" id="div1">
						<div>评论者：{{content.user.realname}}  评论时间：{{content.createtime}}</div>
						<div>评论内容：{{content.content}}</div>
						<div>点赞数：{{content.likenum}}</div>
						<img src="../img/like.jpg" style="width: 30px;height: 30px" @click="like(content.id,i)" v-show="content.islike" >
						<img src="../img/nolike.jpg" style="width: 30px;height: 30px" @click="deletelike(content.id,i)" v-show="!content.islike" >
						<div><button v-show="loginUser.id==content.userid" @click="updateContent(content.id)">修改</button><button @click="deleteContent(content.id)" v-show="loginUser.id==content.userid">删除</button></div>
					</div>
				</div>
			</section>
			<main class="pab120">
				<div class="asideBox">
					<div class="container">
						<a class="asideBtn" @click="yuDing(gym.id)" href="#">立即预定</a>
					</div>
				</div>
			</main>
		</main>
	</div>
	<script>
		let app1=new Vue({
			el:"#app",
			data:{
				gym:{},
				contents:{
					content:"",
					gymid:"",
					id:"",
					likenum:"",
					user:"",
					userid:"",
					islike:"",
				},
				likecontents:{

				},
				gymcontent:{
					content:"",
					gymid:getParameter("gid"),
				},
				loginUser:{},
			},
			methods:{
				find(){
					axios.get("/gym/queryById",{
						params:{
							id:getParameter("gid")
						}
					})
					.then(function(response){
						console.log(response);
						app1.gym=response.data;
					});
				},
				yuDing(id){
					location.href="buyTicket.html?id="+id;
				},
				loadList(){
					let _this=this;
                   axios.get("/content/loadList",{params: {id:getParameter("gid")}}).then(function (response){
					   _this.contents=response.data;
					   console.log(_this.contents)
				   })
				},
				frashlike(){
				   let _this=this;
				   axios.get("/content/findlike").then(function (response){
                        if(response.data!==""){
                             _this.likecontents=response.data;
							 for(let i=0;i<_this.likecontents.length;i++){
								for(let j=0;j<_this.contents.length;j++){
									if(_this.likecontents[i].contentid===_this.contents[j].id){
										_this.contents[j].islike=false;
									}
								}
							 }
						}
				   })
				},
				like(id,i){
					let _this=this;
					axios.get("/user/findLogin/").then(function (response){
						if(response.data===""){
							location.href="/userclient/login.html";
						}else {
							axios.get("/content/addlike",{params:{cid:id}}).then(function (response){
								// location.href="/userclient/profile.html?gid="+getParameter("gid");
								_this.frashlike();
								_this.contents[i].likenum++;
							})
						}
					})
				},
				deletelike(id,i){
					let _this=this;
					axios.get("/content/deletelike",{params:{cid:id}}).then(function (response){
						// location.href="/userclient/profile.html?gid="+getParameter("gid");
						axios.get("/content/updatelike1",{params: {cid:id}}).then(function (response){
							axios.post("/content/updatelike2",app1.contents).then(function (response){
								_this.contents=response.data;
							})
						})
						_this.frashlike();
						_this.contents[i].likenum--;
					})
				},
				deleteContent(id){
					let _this=this;
					axios.delete("/content/deleteContent",{params:{cid:id}}).then(function (response){
						location.href="/userclient/profile.html?gid="+getParameter("gid");
					})
				},
				findLogin(){
					let _this=this;
					axios.get("/user/findLogin/").then(function (response){
						_this.loginUser=response.data;
					})
				},
				updateContent(id){
					let _this=this;
					location.href="/userclient/updateContent.html?cid="+id+"&gid="+getParameter("gid");
				},
			},
			created(){
				this.find();
				this.loadList();
				this.frashlike();
				this.findLogin();
			}
		})
	</script>

		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
	</body>

</html>